<!-- header -->
<header id="header" class="navbar navbar-fixed-top bg-white"  data-spy="affix" data-offset-top="1">
    <div class="container">
        <a class="navbar-brand" href="#"><?php echo $this->Html->image('core/memberz-mini.png'); ?></a>
        <p class="navbar-text pull-left text-muted hidden-xs hidden-sm"><small class="text-muted text-sm"><em>data management made easy</em></small></p>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
            <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="nav navbar-nav navbar-right">
                <li class="hide">
                    <a href="#home">Home</a>
                </li>     
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#features">Features</a>
                </li>
                <li>
                    <a href="#price">Price</a>
                </li>
                <li>
                    <a href="#contact">Contact us</a>
                </li>
            </ul>
        </div>
    </div>
</header>
<!-- / header -->

<section id="content">
    <div>
        <!--<div class="text-center wrapper-lg">
            <h4 class="font-thin">Modern, Clean & Flat</h4>
            <h1 class=" text-uc font-thin">Web <strong class="font-bold text-success">Application</strong> User Interface</h1>
        </div>-->
        <div class="carousel carousel-fade slide auto  bg-black dker" id="c-slide">
            <ol class="carousel-indicators">
                <li data-target="#c-slide" data-slide-to="0" class="active"></li>
                <li data-target="#c-slide" data-slide-to="1" class=""></li>
                <li data-target="#c-slide" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active row">
                    <div class="col-xs-6 text-right">
                        <img src="<?php echo $this->Html->url('/img/iphone.png'); ?>" class="animated fadeInUpBig m-r-lg">
                    </div>
                    <div class="col-sm-6">
                        <h2 class="animated fadeInUp"><strong class="text-white">100</strong> <span class="h3">%</span> <br><span class="font-thin">Responsive</span></h2>
                        <p class="hidden-xs animated fadeInRight">
                            <a href="index.html" target="_blank" class="btn btn-lg btn-info btn-rounded btn-s-lg">Live preview</a>
                        </p>
                    </div>
                </div>
                <div class="item row">
                    <div class="col-xs-5 text-right">
                        <h2 class="animated fadeInLeftBig"><strong class="text-white">8</strong> <span class="font-thin">Color <br>Palettes</span></h2>
                        <p class="animated fadeInUpBig hidden-xs">
                            We provide eight color palettes for you. <br>you can use them to build colorful widgets and components.
                        </p>
                    </div>
                    <div class="col-xs-7">
                        <img src="<?php echo $this->Html->url('/img/ipad.png'); ?>" class="animated fadeInRightBig">              
                    </div>
                </div>
                <div class="item row">
                    <div class="col-xs-6 text-right">
                        <img src="<?php echo $this->Html->url('/img/macpro.png'); ?>" class="animated fadeInDownBig m-r-lg">
                    </div>
                    <div class="col-xs-6">
                        <h2 class="animated fadeInUp"><strong class="text-white">2</strong> <span class="font-thin">Runnable<br> Applications</span></h2>
                        <p class="animated fadeInDown hidden-xs">
                            <strong>Tasks</strong> and <strong>Notes</strong> are built with Backbone with CRUD and Search functions. <br>Have Fun!
                        </p>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#c-slide" data-slide="prev">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="right carousel-control" href="#c-slide" data-slide="next">
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
        <div class="bg-light dker">
            <div class="container wrapper">
                <div class="m-t-lg m-b-lg text-center">
                    For your most convenient data management
                    <a href="#price" class="btn btn-lg btn-danger m-r-sm m-l-sm m-b-sm m-t-sm"><i class="fa fa-cloud-upload"></i> Sign Up</a>
                    <a href="<?php echo $this->Html->url('/organisation/login'); ?>" target="_blank" class="btn btn-lg btn-success m-r-sm m-l-sm m-b-sm m-t-sm">Sign In <i class="fa fa-sign-in"></i></a>
                </div>
            </div>
        </div>
    </div>

    <div id="about">
        <div class="container">
            <div class="m-xl text-center wrapper">
                <h2>About this project</h2>
                <p class="text-muted">Provides you with convenient and easy data management interfaces</p>
            </div>
            <div class="row m-xl">
                <div class="col-lg-6 col-sm-6 media">
                    <span class="fa fa-stack pull-left fa fa-3x" data-ride="animated" data-animation="fadeInLeft">
                        <i class="fa fa-circle fa fa-stack-base text-info"></i>
                        <i class="fa fa-mobile-phone text-white"></i>
                    </span>
                    <div class="media-body" data-ride="animated" data-animation="fadeInRight">
                        <h3 class="m-t-none">Web application</h3>
                        <p>Many mobile app widgets and components, it's fully responsive, it can run on all the size of the screen.</p>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 media m-t-none">
                    <span class="fa fa-stack pull-left fa fa-3x" data-ride="animated" data-animation="fadeInLeft">
                        <i class="fa fa-circle fa fa-stack-base text-warning"></i>
                        <i class="fa fa-signal text-white"></i>
                    </span>
                    <div class="media-body" data-ride="animated" data-animation="fadeInRight">
                        <h3 class="m-t-none">Admin panel</h3>
                        <p>Provides a simple dashboard and for quick view of data collection performance and other useful components for data management.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="features" class="bg-light">
        <div class="container">
            <div class="m-xl text-center wrapper">
                <h2>Features</h2>
                <p class="text-muted">Components for all types of data collection</p>
            </div>
            <div class="row bg-info">
                <div class="col-sm-4 wrapper-xl lter" data-ride="animated" data-animation="fadeInLeft">
                    <p class="text-center">
                        <span class="fa fa-stack-base fa fa-4x">
                            <i class="fa fa-users text-white"></i>
                        </span>
                    </p>
                    <div>
                        <h3 class="text-center">Member Profiles</h3>
                        <p>Collect, update and manage profile information about your members including photos and geo-location informations</p>
                    </div>
                </div>
                <div class="col-sm-4 wrapper-xl" data-ride="animated" data-animation="fadeInUp" data-delay="250">
                    <p class="text-center">
                        <span class="fa fa-stack-base fa-4x">
                            <i class="fa fa-list-alt text-white"></i>
                        </span>
                    </p>
                    <div>
                        <h3 class="text-center">Groups & Associations</h3>
                        <p>Category all your members by custom groups and associations within your organisation.</p>
                    </div>
                </div>
                <div class="col-sm-4 wrapper-xl dker" data-ride="animated" data-animation="fadeInRight" data-delay="500">
                    <p class="text-center">
                        <span class="fa fa-stack-base fa-4x">
                            <i class="fa fa-files-o text-white"></i>
                        </span>
                    </p>
                    <div>
                        <h3 class="text-center">Reports</h3>
                        <p>Get functionality to report on all the membership data collected in an easy to use interface.</p>
                    </div>
                </div>
            </div>
        </div>

        <!--<div class="container">
            <div class="row">
                <div class="col-sm-4 wrapper-xl dk" data-ride="animated" data-animation="fadeInRight" data-delay="500">
                    <p class="text-center">
                        <span class="fa fa-stack fa fa-2x">
                            <i class="fa fa-circle fa fa-stack-base text-white"></i>
                            <i class="fa fa-columns text-info"></i>
                        </span>
                    </p>
                    <div>
                        <h3 class="text-center">App layout</h3>
                        <p>We create a flexiable layout for your web application -- vertical box(vbox) and horizontal box(hbox). you can use them to build any layout as you want!</p>
                    </div>
                </div>
                <div class="col-sm-4 wrapper-xl" data-ride="animated" data-animation="fadeInDown" data-delay="750">
                    <p class="text-center">
                        <span class="fa fa-stack fa fa-2x">
                            <i class="fa fa-circle fa fa-stack-base text-white"></i>
                            <i class="fa fa-dashboard text-info"></i>
                        </span>
                    </p>
                    <div>
                        <h3 class="text-center">8 color palettes</h3>
                        <p>We build many components for your project need. also they are extensible and easy to customize. </p>
                    </div>
                </div>
                <div class="col-sm-4 wrapper-xl dker" data-ride="animated" data-animation="fadeInLeft" data-delay="1000">
                    <p class="text-center"><span class="fa fa-stack fa fa-2x">
                            <i class="fa fa-circle fa fa-stack-base text-white"></i>
                            <i class="fa fa-lightbulb text-info"></i>
                        </span>
                    </p>
                    <div>
                        <h3 class="text-center">Runnable application</h3>
                        <p>We built two backbone applications for your insperation. they have the create, read, update, delete and search functions. have fun...</p>
                    </div>
                </div>
            </div>
        </div>-->

    </div>    
    <div id="price" class="bg-white clearfix">
        <div class="m-xl text-center wrapper">
            <h2>Price Plan</h2>
            <p>Choose the best for your organisation and pay in quarterly, annual or bi-annual packs</p>
        </div>
        <div class="container m-xl">
            <div class="col-sm-3">
                <section class="panel text-center" data-ride="animated" data-animation="fadeInLeftBig">
                    <header class="panel-heading bg-light lter">
                        <h3 class="m-t-sm">Free</h3>
                        <p>30 Day Trail</p>
                    </header>
                    <ul class="list-group">
                        <li class="list-group-item text-center bg-light lt">
                            <span class="text-danger font-bold h3">FREE</span>
                        </li>
                        <li class="list-group-item">
                            Up to 100 members
                        </li>
                        <li class="list-group-item">
                            Max 1 login accounts
                        </li>
                        <li class="list-group-item">
                            Basic Reports & Charts
                        </li>
                        <li class="list-group-item">
                            No Bulk Messaging & Emails
                        </li>
                        <li class="list-group-item">
                            No Service Support
                        </li>
                    </ul>
                    <footer class="panel-footer">
                        <a href="<?php echo $this->Html->url(array('web' => true, 'controller' => 'organisation', 'action' => 'register_subscription', 'prefix' => 'web', 'free trial')); ?>" class="btn btn-info">Sign Up</a>
                    </footer>
                </section>
            </div>
            <div class="col-sm-3">
                <section class="panel text-center" data-ride="animated" data-animation="fadeInLeftBig">
                    <header class="panel-heading bg-light lter">
                        <h3 class="m-t-sm">Basic</h3>
                        <p>for small organisations</p>
                    </header>
                    <ul class="list-group">
                        <li class="list-group-item text-center bg-light lt">
                            <span class="text-danger font-bold h1">$20</span> / month
                        </li>
                        <li class="list-group-item">
                            Up to 300 members
                        </li>
                        <li class="list-group-item">
                            Max 5 login accounts
                        </li>
                        <li class="list-group-item">
                            Basic Reports & Charts
                        </li>
                        <li class="list-group-item">
                            Bulk Messaging & Emails
                        </li>
                        <li class="list-group-item">
                            7*24 free support
                        </li>
                    </ul>
                    <footer class="panel-footer">
                        <a href="#" class="btn btn-info">Sign Up</a>
                    </footer>
                </section>
            </div>
            <div class="col-sm-3">
                <section class="panel text-center m-t-n" data-ride="animated" data-animation="fadeInDown" data-delay="400">
                    <header class="panel-heading bg-success no-border">
                        <h3 class="m-t-sm">Standard</h3>
                        <p>for medium to large organizations</p>
                    </header>
                    <ul class="list-group">
                        <li class="list-group-item text-center bg-light lt">
                            <div class="padder-v">
                                <span class="text-danger font-bold h1">$50</span> / month
                            </div>
                        </li>
                        <li class="list-group-item">
                            Max 5000 member profiles
                        </li>
                        <li class="list-group-item">
                            Max 10 login accounts
                        </li>
                        <li class="list-group-item">
                            Advanced Reports & Charts
                        </li>
                        <li class="list-group-item">
                            Contribution Management
                        </li>
                        <li class="list-group-item">
                            Bulk Messaging & Emails
                        </li>
                        <li class="list-group-item">
                            7*24 free support
                        </li>
                    </ul>
                    <footer class="panel-footer">
                        <a href="#" class="btn btn-info">Sign Up</a>
                    </footer>
                </section>
            </div>
            <div class="col-sm-3">
                <section class="panel text-center" data-ride="animated" data-animation="fadeInRightBig" data-delay="200">
                    <header class="panel-heading bg-light lter">
                        <h3 class="m-t-sm">Enterprise</h3>
                        <p>No limits on data and performance</p>
                    </header>
                    <ul class="list-group">
                        <li class="list-group-item text-center bg-light lt">
                            <span class="text-danger font-bold h1">$100</span> / month
                        </li>
                        <li class="list-group-item">
                            Unlimited member profiles
                        </li>
                        <li class="list-group-item">
                            Unlimited login accounts
                        </li>
                        <li class="list-group-item">
                            Advanced Reports & Charts
                        </li>
                        <li class="list-group-item">
                            Contribution Management
                        </li>
                        <li class="list-group-item">
                            Bulk Messaging & Emails
                        </li>
                        <li class="list-group-item">
                            7*24 free support
                        </li>
                    </ul>
                    <footer class="panel-footer">
                        <a href="#" class="btn btn-info">Sign Up</a>
                    </footer>
                </section>
            </div>
        </div>
    </div>
    <div id="contact" class="bg-light b-t b-b clearfix">
        <div class="container text-center m-xl" data-ride="animated" data-animation="fadeIn">        
            <h2>Newsletter</h2>
            <p>Do not want to miss anything? Subscribe to our newsletter box</p>
            <form class="form-inline m-xl">
                <div class="form-group">
                    <input class="form-control input-lg" placeholder="Your email">
                </div>
                <button type="submit" class="btn btn-info btn-lg">Subscribe</button>
            </form>
        </div>
    </div>
</section>
<div class="bg-white">
    <div class="container wrapper">
        <div class="m-t-lg m-b-lg text-center">
            <!--                    For your faster and easier web development.
                                <a href="http://themeforest.net/item/todo-web-application-and-admin-panel-template/5458827?ref=flatfull" target="_blank" class="btn btn-lg btn-danger m-r-sm m-l-sm m-b-sm m-t-sm"  data-ride="animated" data-animation="bounceInLeft" data-delay="200"><i class="fa fa-cloud-download"></i> Download it</a>
                                <a href="index.html" target="_blank" class="btn btn-lg btn-success m-r-sm m-l-sm m-b-sm m-t-sm">Live Preview <i class="fa fa-arrow-right"></i></a>-->

            For your most convenient data management
            <a href="#price" class="btn btn-lg btn-danger m-r-sm m-l-sm m-b-sm m-t-sm" data-ride="animated" data-animation="bounceInLeft" data-delay="200"><i class="fa fa-cloud-upload"></i> Sign Up</a>
            <a href="<?php echo $this->Html->url('/organisation/login'); ?>" target="_blank" class="btn btn-lg btn-success m-r-sm m-l-sm m-b-sm m-t-sm">Sign In <i class="fa fa-sign-in"></i></a>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="bg-black dk clearfix">
        <div class="container text-center wrapper">
            <a href="#home"><i class="fa fa-angle-up fa fa-2x"></i></a>
        </div>
    </div>
    <div class="bg-black dker wrapper">
        <div class="container">
            <div class="row m-xl">
                <div class="col-sm-3">
                    <h5 class="text-uc m-b">Find Us</h5>
                    <p class="text-sm">23 soe Midlokls <br>
                        120002 Loki — UNITED KINGDOM <br>
                        +333 432 321 322
                    </p>
                </div>
                <div class="col-sm-3">
                    <h5 class="text-uc m-b">Mail Us</h5>
                    <p class="text-sm"><a href="mailto:hey@example.com">info@example.com</a></p>
                </div>
                <div class="col-sm-3">
                    <h5 class="text-uc m-b">Join Us</h5>
                    <p class="text-sm">Send your resume to <br><a href="mailto:hey@example.com">recruit@example.com</a></p>
                </div>
                <div class="col-sm-3">
                    <h5 class="text-uc m-b">Follow Us</h5>
                    <a href="#" class="btn btn-icon btn-rounded btn-facebook"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="btn btn-icon btn-rounded btn-twitter"><i class="fa fa-twitter"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

<?php
echo $this->Html->script('jquery.min.js');
echo $this->Html->script('bootstrap.js');
echo $this->Html->script('app.js');

echo $this->Html->script('appear/jquery.appear.js');
echo $this->Html->script('scroll/smoothscroll.js');
echo $this->Html->script('landing.js');
?>